<template>
  <div>
    <!--  面包屑导航区域 -->
    <br>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人员管理</el-breadcrumb-item>
      <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  卡片视图区域-->
    <el-card >
      <!--搜索与添加区域-->
      <el-row :gutter="30">
        <el-col :span="3.5">
          <el-switch
            style="display: block;padding-top: 10px"
            v-model="searchSupplierType"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="名称查询"
            inactive-text="供应商账号查询">
          </el-switch>
        </el-col>
        <el-col :span="7">
          <el-input placeholder="请输入供应商账号或名称"
                    v-model="searchSupplierIDorName">
            <el-button slot="append" icon="el-icon-search"
            @click="searchSupplier"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="addDialogVisible=true">添加供应商</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary"  @click="getSupplierList">全部供应商</el-button>
        </el-col>
      </el-row>

      <!--供应商列表区域-->
      <el-table :data="this.supplierList" border stripe height="490">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="账号" prop="supplierID"width="130px"></el-table-column>
        <el-table-column label="供应商" prop="supplierName"></el-table-column>
        <el-table-column label="地址" prop="address" width="350px"></el-table-column>
        <el-table-column label="电话" prop="tel" ></el-table-column>
        <el-table-column label="操作" prop="quantity" width="200px">
          <template slot-scope="scope">
            <!--          修改按钮-->
            <el-tooltip  effect="dark" content="修改" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
            <!--          删除按钮-->
            <el-tooltip  effect="dark" content="删除供应商" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                         @click="removeSupplierByID(scope.row.supplierID)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <!--  添加供应商的对话框-->
    <el-dialog title="添加供应商"
               :visible.sync="addDialogVisible" width="30%"
               @close="addDialogClosed" >
      <!--    内容主题区域-->
      <el-form :model="addForm" :rules="addFormRules"
               ref="addFormRef" label-width="100px">
        <el-form-item label="供应商账号" prop="supplierID">
          <el-input v-model="addForm.supplierID"
                    placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="addForm.supplierName"
                    placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address"
                    placeholder="请输入地址，可选"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="addForm.tel"
                    placeholder="请输入联系方式"></el-input>
        </el-form-item>
      </el-form>
      <!--    底部区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSupplier">确 定</el-button>
  </span>
    </el-dialog>

    <!--  修改供应商的对话框-->
    <el-dialog title="修改供应商"
               :visible.sync="editDialogVisible" width="50%">
      <!--    内容主题区域-->
      <el-form :model="editForm" ref="editFormRef" label-width="120px">
        <el-form-item label="供应商账号" prop="supplierID">
          <el-input v-model="editForm.supplierID" disabled></el-input>
        </el-form-item>
        <el-row :gutter="1">
          <el-col :span="7.5">
            <el-form-item label="供应商名称修改" prop="supplierNameTip">
            <el-switch v-model="editForm.supplierNameTip"
                       style="display: block;padding-top: 10px"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-text="YES"
                       inactive-text="NO">
            </el-switch>
          </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="名称" prop="supplierName">
              <el-input v-model="editForm.supplierName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="7.5">
            <el-form-item label="供应商地址修改" prop="addressTip">
              <el-switch v-model="editForm.addressTip"
                         style="display: block;padding-top: 10px"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         active-text="YES"
                         inactive-text="NO">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="地址" prop="address">
              <el-input v-model="editForm.address" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="7.5">
            <el-form-item label="供应商电话修改" prop="tel">
              <el-switch v-model="editForm.telTip"
                         style="display: block;padding-top: 10px"
                         active-color="#13ce66"
                         inactive-color="#ff4949"
                         active-text="YES"
                         inactive-text="NO">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="editForm.tel" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!--    底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogClosed">取 消</el-button>
        <el-button type="primary" @click="editSupplierInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>


</template>

<script>
export default {
  name: 'SupplierItem',
  data(){
    return{
      supplierList:[
      ],
      //查找时选择使用id查询或名称查询，默认选择名称Name
      searchSupplierType:true,
      //记录供应商查询的值
      searchSupplierIDorName:'',
      //控制添加供应商对话框的显示与隐藏
      addDialogVisible:false,
      //添加供应商的表单数据
      addForm:{
        supplierID:'',
        supplierName:'',
        address:'',
        tel:''
      },
      //添加表单验证规则对象
      addFormRules:{
        supplierID:[
          {required:true,message:'供应商账号不得为空',trigger:'blur'},
        ],
        supplierName:[
          {required:true,message:'供应商名称不得为空',trigger:'blur'},
        ],
        tel:[
          {required:true,message:'联系方式不得为空',trigger:'blur'},
        ]
      },
      //添加修改供应商的表单数据
      editForm:{
        supplierID: '',
        supplierName: '',
        address: '',
        tel: '',
        supplierNameTip: true,
        addressTip: true,
        telTip: true
      },
      //控制修改供应商对话框的显示与隐藏
      editDialogVisible:false,

    }
  },
  created () {
    this.getSupplierList()
  },
  methods:{
    //post请求获取供应商信息
    async getSupplierList(){
      const { data: res } =
        await this.$http.post('/findAllSuppliers', [])
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404)
        return this.$message.error('未查询到供应商！')
      if (res.code == 10200) {
        this.$message.success('刷新供应商成功！');
        let item = []
        res.data.forEach(function(value, index) {
          let queryInfo = {
            supplierID: value.supplierID,
            supplierName: value.supplierName,
            address: value.address,
            tel: value.tel
          }
          item=item.concat(queryInfo)
        })
        this.supplierList=item
        console.log(this.supplierList)
      }
    },
    //查找供应商
    async searchSupplier(){
      if(!this.searchSupplierIDorName)
        return this.$message.error('查询失败，请输入供应商账号或姓名！')
      let res
      if(this.searchSupplierType){
        const{data}=
          await this.$http.post('/findSupplier',
            {supplierIdOrName:this.searchSupplierIDorName})
        res=data
      }
      if(!this.searchSupplierType){
        const{data}=
          await this.$http.post('/findSupplier',
            {supplierIdOrName:this.searchSupplierIDorName})
        res=data
      }
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('未查询到用户！')
      if (res.code == 10412) return this.$message.error('请求错误！')
      if (res.code == 10200) {
        console.log(res)
        let item=[]
        res.data.forEach(function(value,index) {
          let queryInfo = {
            supplierID: value.supplierID,
            supplierName: value.supplierName,
            address: value.address,
            tel: value.tel
          }
          item = item.concat(queryInfo)
        })
        this.supplierList=item
        return this.$message.success('查找成功！')
        //重新获取列表
        await this.getSupplierList()
      }
    },
    //监听添加供应商对话框的关闭事件
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },
    //添加供应商
    addSupplier(){
      this.$refs.addFormRef.validate(async valid=> {
        if (!valid) return this.$message.error('添加失败，请输入新用户姓名和电话！')
        //可以添加供应商的网络请求
        const { data: res } =
          await this.$http.post('/addSupplier', this.addForm)
        if (res.code == 10401) {
          await this.$router.push('/login')
          return this.$message.error('您没有权限，请重新登陆！')
        }
        if (res.code == 10412)
          return this.$message.error('添加失败，供应商已存在！')
        if (res.code == 10200) {
          //隐藏添加用户的对话框
          this.addDialogVisible = false
          this.$message.success('添加成功！')
          //重新获取供应商列表数据
          await this.getSupplierList()
        }
      })
    },
    //展示编辑用户的对话框
    showEditDialog(user){
      //user为选中行用户的全部信息，传入便于修改
      this.editForm.supplierID=user.supplierID
      this.editForm.supplierName=user.supplierName
      this.editForm.address=user.address
      this.editForm.tel=user.tel
      this.editDialogVisible=true
    },
    //修改用户信息并提交
    async editSupplierInfo(){
      let item={supplierID:this.editForm.supplierID}
      if(this.editForm.supplierNameTip==true)
        item.supplierName=this.editForm.supplierName
      if(this.editForm.addressTip==true)
        item.supplierName=this.editForm.address
      if(this.editForm.telTip==true)
        item.supplierName=this.editForm.tel
      const { data: res } =
        await this.$http.post('/editSupplier', item)
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10412)
        return this.$message.error('请求失败！')
      if (res.code == 10200) {
        //隐藏修改用户信息的对话框
        this.editDialogClosed()
        this.$message.success('修改成功！')
        //重新获取用户列表数据
        await this.getSupplierList()
      }
    },
    //监听修改供应商对话框的关闭事件
    editDialogClosed(){
      this.editDialogVisible=false
      this.editForm={
        supplierID: '',
        supplierName: '',
        address: '',
        tel: '',
        supplierNameTip: true,
        addressTip: true,
        telTip: true
      }
    },
    //根据ID删除供货商
    async removeSupplierByID(id){
      //弹框询问用户是否离职，
      const confirmResult=await this.$confirm('此操作将永久删除供应商， 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)//返回会触发错误，接受
      //如果用户确认删除，返回字符串 confirm
      //如果用户确认删除，返回字符串 cancel
      if(confirmResult!='confirm')
        return this.$message.info('已取消删除')
      //确认删除发起请求
      const { data: res } =
        await this.$http.post('/deleteSupplier', { supplierID:id })
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')}
      if (res.code == 10404)
        return this.$message.error('未查询到用户！')
      if (res.code == 10412)
        return this.$message.error('该供应商已参与进退货，不能删除！')
      if (res.code == 10200) {
        this.$message.success('永久删除供应商成功！')
        await this.getSupplierList()
      }
    }

  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
</style>
